<template>
	<view class="main dispaly-col-center">
		<view class="box dispaly-col-center">
			<view class="dispaly-col-center">
				<view class="btn-box1">
					<view class="btn1 b" @click="scanCode">
						<image src="/static/scan.png" mode="aspectFill"></image>
						核销二维码
					</view>
				</view>
				<view class="content" v-if="JSON.stringify(detail) != '{}'">
					<view class="item">
						<view class="i-t">
							<view class="line"></view>
							<view class="i-t-txt">基本信息</view>
						</view>
						<view class="desc">
							<view class="d-item">
								<view class="d-l">优惠券名称</view>
								<view class="d-r">{{ detail.yhjName }}</view>
							</view>
							<view class="d-item">
								<view class="d-l">优惠券面额</view>
								<view class="d-r">￥{{ detail.denomination }}</view>
							</view>
							<view class="d-item">
								<view class="d-l">优惠券截至</view>
								<view class="d-r">{{ detail.expiryTime }}</view>
							</view>
							<view class="d-item">
								<view class="d-l">优惠券细则</view>
								<view class="d-r">{{ detail.rule }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { cancelCoupon } from '@/api/apiList.js';

let detail = ref({});
const scanCode = () => {
	uni.scanCode({
		onlyFromCamera: true,
		success: async (res) => {
			uni.showLoading({
				title: '核销中',
				icon: 'none'
			});
			const result = await cancelCoupon({ qrCode: res.result });
			if (result.code == 200) {
				detail.value = result.data;
				uni.hideLoading();
				uni.showToast({
					title: '核销成功',
					icon: 'none',
					duration: 2000
				});
			} else {
				uni.hideLoading();
				uni.showToast({
					title: result.msg,
					icon: 'none',
					duration: 2000
				});
			}
			console.log('条码类型：' + res.scanType);
			console.log('条码内容：' + res.result);
		}
	});
};
</script>

<style>
page {
	height: 100vh;
	background: rgb(245, 152, 94);
	background: linear-gradient(180deg, rgba(245, 152, 94, 1) 0%, rgba(255, 128, 102, 1) 0%, rgba(239, 197, 176, 1) 43%, rgba(255, 255, 255, 1) 100%, rgba(249, 142, 95, 1) 100%);
}
</style>

<style lang="scss" scoped>
.btn1 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 612rpx;
	height: 98rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
}

.b {
	background: linear-gradient(0deg, #f49a5e 0%, #fe4f56 100%);
	color: #ffffff;
}

.main {
	height: 100vh;

	.box {
		.btn-box1 {
			margin-top: 102rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}
			.btn1:first-child {
				margin-bottom: 40rpx;
			}
		}

		.tel {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 48rpx;
			color: #485658;
			margin-top: 187rpx;
		}
	}
}
.content {
	padding: 30rpx;
	width: 100%;
	.get {
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(0deg, #f49a5e 0%, #fe4f56 100%);
		padding: 20rpx 0;
		width: 100%;
		color: #fff;
		border-radius: 16rpx;
	}
	.get1 {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: gray;
		padding: 20rpx 0;
		width: 100%;
		color: #fff;
		border-radius: 16rpx;
	}
	.item:first-child {
		margin-bottom: 24rpx;
	}
	.item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		.code {
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 360rpx;
				height: 360rpx;
				border-radius: 12rpx;
			}
		}
		.i-t {
			display: flex;
			align-items: center;
			margin-bottom: 61rpx;
			.line {
				width: 12rpx;
				height: 30rpx;
				background: linear-gradient(0deg, #fb4e47 0%, #ffffff 100%);
				border-radius: 6rpx;
				margin-right: 10rpx;
			}
			.i-t-txt {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
			}
		}
		.desc {
			.d-item:last-child {
				margin-bottom: 0;
				border: none;
			}
			.d-item {
				display: flex;
				align-items: center;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #eee;
				margin-bottom: 30rpx;
				.d-l {
					margin-right: 36rpx;
				}
				.d-r {
				}
				.d-l,
				.d-r {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #222222;
				}
			}
		}
	}
}
</style>
